<template>
	<view class="login-box">
		<view class="bg-card">
			<view class="wite"></view>
		</view>
		<view class="top-card">
			<image src="../../static/login.png" mode="" class="cube"></image>
		</view>
		<view class="input-box">
			<view class="input-item">
				<view class="" style="display: flex;align-items: center;">
					<image src="../../static/pone.png" mode=""></image>
					<input v-model="mobile" placeholder="请输入手机号" placeholder-class="placeholder" type="number"
						maxlength="11" />
				</view>
			</view>
			<view class="input-item">
				<view class="flex-align-center">
					<image src="../../static/code.png" mode=""></image>
					<input v-model="code" placeholder="请输入验证码" placeholder-class="placeholder" type="number"
						maxlength="6" />
				</view>
				<text @click="getcode">
					<text v-if="codeflag==1">发送验证码</text>
					<view class="codetime" v-if="codeflag==2">
						<u-count-down :time="60* 1000" format="ss" @finish="finish"></u-count-down><text> 秒后重新获取</text>
					</view>
					<text v-if="codeflag==3" @click="getcode">重新获取</text>
				</text>
			</view>
			<view class="button" @click="login">登录</view>
			<view class="xieyi">
				<view class="" @click="agreeClick">
					<radio :checked="agree" style="transform:scale(0.6)" activeBackgroundColor="#AB73FF" />
					<text>我已阅读并同意</text>
					<text class="color-text" @click="toPage">《用户隐私协议》</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		sendCaptcha,
		login,
		userInfo
	} from "@/api/login.js"
	import store from '@/store/index.js';
	export default {
		data() {
			return {
				codeflag: 1,
				mobile: '',
				code: '',
				agree: false,
			};
		},
		methods: {

			// 获取验证码
			getcode() {
				if (this.codeflag == 3) {
					this.codeflag = 2;
				}
				if (uni.$u.test.mobile(this.mobile)) {
					this.codeflag = 2;
					sendCaptcha({
						phoneNumber: this.mobile
					}).then(res => {
						console.log(res.code, '++++++++')
					})
				} else {
					return uni.$u.toast('请输入有效的手机号')
				}
			},
			// 登录
			login() {
				if (uni.$u.test.mobile(this.mobile)) {
					if (uni.$u.test.code(this.code, 4)) {
						if (!this.agree) {
							return uni.$u.toast('请勾选协议！')
						}
						login({
							phoneNumber: Number(this.mobile),
							captcha: Number(this.code),
						}).then(res => {
							let data = res.data;
							console.log(data, '++')
							if (res.code == 200) {
								store.commit('setUserid', data.userId);
								store.commit('setUsertoken', data.token);
								this.getuserInfo(data.userId);
							}
						})
					} else {
						return uni.$u.toast('请输入有效的验证码')
					}
				} else {
					return uni.$u.toast('请输入有效的手机号')
				}

			},
			agreeClick() {
				this.agree = !this.agree
			},
			toPage() {
				uni.navigateTo({
					url: '/pagesA/agreement/agreement'
				})
			},
			//获取用户信息
			getuserInfo(userid) {
				userInfo({
					userId: userid
				}).then(res => {
					store.commit('setUserinfo', res.data);
					uni.switchTab({
						url: '/pages/index/index'
					});
				})
			},
			finish() {
				this.codeflag = 3
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.bg-card {
		background:
			linear-gradient(270deg, rgba(254, 235, 255, 1) 0%, rgba(217, 201, 255, 1) 100%);
		width: 100%;
		height: 470rpx;
		position: absolute;
		top: 0%;
		left: 0%;
		filter: blur(9px);
		background-color: #fff;

		.wite {
			width: 100%;
			height: 30%;
			position: absolute;
			bottom: 0%;
			left: 0%;
			z-index: 1;
			filter: blur(9px);
			background:
				linear-gradient(270deg, rgba(255, 266, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
		}
	}

	.login-box {
		width: 100%;
		height: 100vh;

		.top-card {
			width: 100%;
			height: 50%;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			padding: 0rpx 40rpx;
			padding-top: 38%;
			box-sizing: border-box;

			.cube {
				width: 432rpx;
				height: 154rpx;
			}
		}

		.input-box {
			width: 100%;
			margin-top: -200rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 0rpx 40rpx;
			box-sizing: border-box;

			.input-item {
				width: 100%;
				// border-bottom: 4rpx solid #e5e5e5;
				padding: 25rpx 20rpx;
				display: flex;
				justify-content: space-between;
				margin-bottom: 30rpx;
				background: #f5f7fa;
				border-radius: 40rpx;
				box-sizing: border-box;

				image {
					width: 44rpx;
					height: 44rpx;
				}

				.codetime {
					display: flex;
					align-items: center;
					color: #AB73FF !important;
					font-size: 28rpx;


					text {
						padding: 0rpx 4rpx;
						color: #AB73FF !important;

					}

				}

				.placeholder {
					font-size: 30rpx;
					color: #999999;
					letter-spacing: 2rpx;
				}

				text {
					color: #AB73FF;
					font-size: 30rpx;
					white-space: nowrap !important;
				}

				input {
					padding-left: 10rpx;
				}

			}

			.button {
				width: 100%;
				padding: 20rpx 0rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 400;
				font-family: "AlibabaPuHuiTi";
				border-radius: 48rpx;
				background: linear-gradient(270deg, #9f5eff 0%, #d199ff 100%);
				margin-top: 60rpx;
				letter-spacing: 2rpx;
				color: #fff;
			}
		}
	}

	::v-deep(.u-count-down__text) {
		color: #D91A1A !important;
	}

	.xieyi {
		margin-top: 50rpx;
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: row;
		// justify-content: center;
		color: #696969;
		font-size: 24rpx;
		font-weight: 中等;
		font-family: "苹方";

		.color-text {
			color: #AB73FF;
		}
	}
</style>